<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
#parse("page_include.html")
</head>
<style type="text/css">
#container {
	position: relative;
	width: 800px;
	height: 400px;
	overflow: hidden;
	border: 1px solid #CCC;
}

#map {
	position: absolute;
}

.mark {
	position: absolute;
	border: 1px solid red;
	font-size: 0px;
}
</style>
<script type="text/javascript">
    function addMark(p, taskItem) {
        var div = document.createElement("div");
        div.onclick = function(obj){
            alert(obj.target.id+obj.target.piid);
        };
        div.id = taskItem.taskId;
        div.piid = taskItem.piid;
        div.className = "mark";
        div.style.width = taskItem.width + "px";
        div.style.height = taskItem.height + "px";
        div.style.left = taskItem.x + "px";
        div.style.top = taskItem.y + "px";
        p.appendChild(div)
    }
    window.onload = function() {
        addMarkToActivePoint(${piid})
    };
    function addMarkToActivePoint(piid){
        var url = '${rc.contextPath}/activiti/getActiveTasksPoint.do';
        var data = { "piid" : piid};
        ajaxPost(url, data, function(rs) {
            var container = document.getElementById("container");
            addMark(container, rs);
        });
    }
</script>
</head>
<body>
	<div id="container" data-type="panel" title="流程图查看" style="height: 500px; padding: 0px;">
		<div id="map">
			<img alt="sf" src="${rc.contextPath}/activiti/getPDiagramBypdid.do?pdid=${pdid}">
		</div>
	</div>
</body>
</html>